<template>
	<view>
		<image src="@/static/account/bg.png" class="bg" mode="widthFix"></image>
		<view class="Copyright">
			浙ICP备18041796号-10 Copyright@ 2024
		</view>
		<view class="container">
			<view class="logo">
				<image src="@/static/account/logo2.png" mode=""></image>
			</view>
			<view class="form">
				<view class="title">
					Reset password
				</view>
				<view class="text">
					Please enter your Email to get reset link
				</view>
				<!-- 基础表单校验 -->
				<uni-forms ref="form" :rules="rules" :modelValue="form" label-position="top" :label-width="300">
					<uni-forms-item label="Your Email" required name="email">
						<uni-easyinput v-model="form.email" placeholder="Confim your email" />
					</uni-forms-item>
				</uni-forms>
			</view>
			<view class="submitBtn" @click="submit">
				Send The Link
			</view>
			<view class="tips">
				<navigator url="./login">
					<text>Retum to login</text>
				</navigator>

			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					email: '',
				},
				// 校验规则
				rules: {
					email: {
						rules: [{
							required: true,
							errorMessage: 'required'
						}]
					},
				},
			}
		},
		methods: {
			submit() {
				this.$refs.form.validate().then(res => {
					this.$post("/user/forgetpwd", {
						verify_email: this.form.email
					}).then(res => {
						this.$toast((res.msg))
						setTimeout(function(){
							uni.redirectTo({
								url: "./login"
							})
						},1200)
						
					})
				})
			},
		}
	}
</script>

<style lang="scss">
	.bg {
		position: fixed;
		width: 100%;
		left: 0;
		top: 0;
	}

	.bottomBg {
		position: fixed;
		width: 605rpx;
		left: 50%;
		bottom: 22rpx;
		transform: translateX(-50%);
	}

	.Copyright {
		position: fixed;
		bottom: 50rpx;
		width: 100%;
		text-align: center;
		font-size: 24rpx;
		color: #0C0E27;
		opacity: 0.5;
	}

	.container {
		position: relative;
		padding: 0 32rpx;
		padding-top: 110rpx;

		.logo {
			text-align: center;
			font-size: 22rpx;
			margin-bottom: 60rpx;

			image {
				width: 235rpx;
				height: 163rpx;
			}
		}

		.tips {
			font-size: 26rpx;
			text-align: center;

			text {
				color: $main-color;
			}
		}

		.submitBtn {
			margin: 300rpx 0 40rpx;
		}


		.form {
			text-align: center;

			.title {
				font-size: 48rpx;
				font-weight: bold;
			}

			.text {
				font-size: 26rpx;
				color: #999;
				margin: 10rpx 0;
			}
		}
	}

	/deep/ .uni-forms-item__label {
		font-size: 32rpx;
		color: #0C0E27;
		height: 36px;
	}
</style>